<script setup lang="ts">
import {onMounted, reactive, useTemplateRef} from "vue";
import {cartList as list} from "@/dt-lib/plug/api/admin/customerCenter";

import MyCardTable from "@/dt-lib/components/MyCardTable.vue";

import type {PostItem} from "@/dt-lib/pages/home/customerCenter/components/cartSearchComp.vue";
import {pageDefault} from "@/dt-lib/pages/home/customerCenter/components/cartSearchComp.vue";

const searchRef = useTemplateRef('searchRef');

interface PageData {
  pages: number;
  page: number;
  limit: number;
  total: number;
  list: Array<RowVO[]>;
}


const getSearch = (searchData: PostItem) => {
  // console.log("searchData", searchData)

  const searchDataCloned = JSON.parse(JSON.stringify(searchData))

  // 浅拷贝日期会丢失，这里从原数据拿日期数据
  searchDataCloned.date_start = searchData.date[0]
  searchDataCloned.date_end = searchData.date[1]

  searchDataCloned.brand = searchDataCloned.brand.join(',')
  searchDataCloned.shop = searchDataCloned.shop.join(',')
  searchDataCloned.city = searchDataCloned.city.join(',')

  searchDataCloned.add_user_id = searchDataCloned.add_user_id.join(',')
  searchDataCloned.order_date_id_user = searchDataCloned.order_date_id_user.join(',')

  // console.log("searchDataCloned", searchDataCloned)

  const addDeptIdArr: number[] = []
  if (searchDataCloned.add_dept_id.length > 0) {
    searchDataCloned.add_dept_id.forEach(searchAddDeptIdArr => {
      searchAddDeptIdArr.forEach(addDeptId => {
        addDeptIdArr.push(addDeptId)
      })
    })
  }

  const addDeptIds = [...new Set(addDeptIdArr)]

  searchDataCloned.add_dept_id = addDeptIds.join(',')

  const orderDeptIdArr: number[] = []
  if (searchDataCloned.order_date_id_dept.length > 0) {
    searchDataCloned.order_date_id_dept.forEach(searchOrderDeptIdArr => {
      searchOrderDeptIdArr.forEach(orderDeptId => {
        orderDeptIdArr.push(orderDeptId)
      })
    })
  }

  const orderDeptIdIds = [...new Set(orderDeptIdArr)]

  searchDataCloned.order_date_id_dept = orderDeptIdIds.join(',')

  searchDataCloned.keyword = searchDataCloned.keyword.trim()

  delete searchDataCloned.date

  // console.log(searchDataCloned);

  gridOptions.loading = true
  list(searchDataCloned).then(res => {
    handlePageData(res.data)
  }).finally(() => {
    gridOptions.loading = false
  })

}

import type {VxeGridProps} from 'vxe-table'
import {
  formatCartStatusCss,
  formatCartStatusText,
  formatCusTypeCss,
  formatCusTypeText,
  formatDate
} from "@/dt-lib/help/fun.ts";


import {Edit} from "@element-plus/icons-vue";
import CartSearchComp from "@/dt-lib/pages/home/customerCenter/components/cartSearchComp.vue";
import CustomerProfileComp from "@/dt-lib/pages/home/customerCenter/components/customerProfileComp.vue";

interface RowVO {
  add_user_id: number
  add_user_name: string
  appoint_follow: number
  appoint_follow_name: string
  appoint_follow_time: number
  appoint_time: number
  bra_name: string
  cart_id: number
  city_name: string
  cus_id: number
  cus_img: string
  cus_name: string
  cus_sex: number
  cus_type: number
  dept_city_id: number
  dept_id: number
  end_time: number
  order_date_id_user: number
  order_user_name: string
  projects: string
  remarks: string
  shop_name: string
  status: number
}

const handlePageData = (pageData: PageData) => {
  gridOptions.data = pageData.list
  pagerVO.total = pageData.total
  pagerVO.pageSize = pageData.limit
  pagerVO.currentPage = pageData.page
}

const pagerVO = reactive({
  total: 0,
  currentPage: pageDefault.page,
  pageSize: pageDefault.limit
})

const gridOptions = reactive<VxeGridProps<RowVO>>({
  stripe: true,
  round: true,
  border: true,
  loading: false,
  height: 854,
  headerAlign: "center",
  cellConfig: {
    height: 80
  },
  columns: [
    {type: 'seq', width: 70, align: 'center'},
    {
      field: 'cart_id',
      title: '客户信息',
      align: 'center',
      resizable: true,
      width:220,
      minWidth: 200,
      maxWidth: 300,
      slots: {default: 'customer_default'}
    },
    {field: 'appoint_time', title: '预约时间', width: 150, align: 'center', slots: {default: 'appoint_time_default'}},
    {field: 'shop_name', title: '预约门店', width: 150, align: 'center'},
    {field: 'cus_type', title: '预约类型', width: 80, align: 'center', slots: {default: 'cus_type_default'}},
    {field: 'status', title: '预约状态', width: 80, align: 'center', slots: {default: 'cart_status_default'}},
    {
      field: 'appoint_follow_name',
      title: '跟进状态',
      width: 200,
      align: 'center',
      slots: {default: 'appoint_follow_default'}
    },
    {field: 'projects', title: '预约项目', width: 260, slots: {default: 'projects_default'}},
    {field: 'remarks', title: '预约备注', width: 260, slots: {default: 'remarks_default'}},
    {field: 'add_user_name', title: '预约人', width: 100, align: 'center'},
    {field: 'order_user_name', title: '排店人', width: 100, align: 'center'},
    {field: 'bra_name', title: '品牌', width: 100, align: 'center'},
    {field: 'city_name', title: '城市', width: 100, align: 'center'},
  ],
  seqConfig: {
    seqMethod({rowIndex}) {
      return (pagerVO.currentPage - 1) * pagerVO.pageSize + rowIndex + 1
    }
  },
  data: []
})

onMounted(() => {
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
})

const handleSizeChange = (pageSize: number) => {
  pagerVO.currentPage = pageDefault.page
  pagerVO.pageSize = pageSize
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
}
const handleCurrentChange = (currentPage: number) => {
  pagerVO.currentPage = currentPage
  searchRef.value?.onSearch(pagerVO.pageSize, pagerVO.currentPage)
}

const pageTitle = '预约列表'
const pageTitleAs = 'cart'

</script>

<template>
  <div class="app-page">
    <div class="app-page-pd15">

      <my-card-table :title="pageTitle">
        <template #table-search>
          <cart-search-comp ref="searchRef" :btLoading="gridOptions.loading" @search="getSearch"/>
        </template>

        <vxe-grid v-bind="gridOptions">
          <template #empty>
            <el-empty description=""/>
          </template>


          <template #customer_default="{ row }">
            <customer-profile-comp :customer="row"/>
          </template>

          <template #appoint_time_default="{ row }">
            <div class="appoint_time">
              <div class="name">{{ formatDate(row.appoint_time, false) }}
                <el-button
                    type="info"
                    text
                    :disabled="row.status !=1"
                    style="padding:0 4px; font-size: 14px"
                    size="small"
                >
                  <el-icon>
                    <Edit/>
                  </el-icon>
                </el-button>
              </div>
            </div>

          </template>

          <template #cus_type_default="{ row }">
            <el-tag :type="formatCusTypeCss(row.cus_type)">{{ formatCusTypeText(row.cus_type) }}</el-tag>
          </template>

          <template #cart_status_default="{ row }">
            <el-text :type="formatCartStatusCss(row.status)"> {{
                formatCartStatusText(row.status)
              }}
            </el-text>
          </template>

          <template #appoint_follow_default="{ row }">
            <div class="appoint_follow_name">
              <div class="name">{{ row.appoint_follow_name }}
                <el-button
                    type="info"
                    text
                    :disabled="row.appoint_follow ==10"
                    style="padding:0 4px; font-size: 14px"
                    size="small"
                >
                  <el-icon>
                    <Edit/>
                  </el-icon>
                </el-button>
              </div>
              <div class="date">
                <el-text type="info">{{ formatDate(row.appoint_follow_time, false) }}</el-text>
              </div>
            </div>
          </template>
          <template #projects_default="{ row }">
            {{ row.projects }}
            <el-button
                type="info"
                text
                :disabled="row.status !=1"
                style="padding:0 4px; font-size: 14px"
                size="small"
            >
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
          </template>
          <template #remarks_default="{ row }">
            {{ row.remarks }}
            <el-button
                type="info"
                text
                :disabled="row.status !=1"
                style="padding:0 4px; font-size: 14px"
                size="small"
            >
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
          </template>

        </vxe-grid>

        <template #footer>

          <el-pagination
              v-model:current-page="pagerVO.currentPage"
              v-model:page-size="pagerVO.pageSize"
              :page-sizes="pageDefault.sizes"
              :background="pageDefault.background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagerVO.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              style="justify-content: flex-end; width: 100%"
          />

        </template>

      </my-card-table>


    </div>


  </div>


</template>

<style scoped lang="scss">
.appoint_follow_name, .appoint_time {
  display: flex;
  align-items: center;
  flex-direction: column;

  .name {
    display: flex;
    align-items: center;
  }

  .date {
    font-size: 12px;
  }
}


</style>